<template>
  <div class="star">
       <ul>
            <li v-for="n in starArr" :class="n"></li>
       </ul>
  </div>
</template>

<script>
export default {
  props:['score'],
  computed:{
    starArr:function(){
      let arr=[];
      let total=Math.floor(this.score/0.5);
      let full=Math.floor(total/2);
      let half=total%2==0? 0:1;
      for(let i=1;i<=5;i++){
         if(i<=full){
            arr.push('full');
         }else if(half==1){
            arr.push('half');
            half=0;
         }else{
            arr.push('empty');
         }
      }
      return arr;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.star
{
  display:inline-block;
  ul
  {
    li
    {
      display:inline-block;
      width:0.3rem;
      height:0.3rem;
      background-size:100%;
      background-position:center;
      background-repeat:no-repeat;
      margin:0 1px;
      &.empty
      {
        background-image:url(../assets/empty_star.png);
      }
      &.full
      {
        background-image:url(../assets/full_star.png);
      }
      &.half
      {
        background-image:url(../assets/half_star.png);
      }
    }
  }
}
</style>
